<template>
  <view class="warp">
    <view class="title">设置默认播放速度，修改后将对平台内所有短剧都生效</view>

    <view class="speed">
      <view :class="{speedItem:true,active: active === index}" v-for="(item,index) in speed" :key="index" @click="set(item,index)">{{item + 'x'}}</view>
    </view>
  </view>
</template>


<script>
export default {
  name: "speed",
  data() {
    return {
      speed: [0.75,1,1.25,1.5,2],
      active: 1
    }
  },
  onShow() {
    if(!uni.getStorageSync('speed')) uni.setStorageSync('speed', 1)
    this.active = this.speed.indexOf(uni.getStorageSync('speed'))
  },
  methods: {
    set(item,index){
      this.active = index
      uni.setStorageSync('speed', item)
    }
  }
}
</script>


<style scoped lang="scss">
.warp{
  background-color: #F7F7F7;
  height: 100vh;
}

.title{
  text-align: center;
  padding: 30rpx 0 100rpx;
  color: #686767;
  font-size: 24rpx;
}

.speed{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20rpx;

  .speedItem{
    width: 90%;
    background-color: #fff;
    color: #2A2A2A;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    border-radius: 20rpx;
  }
  
  .active{
    background-color: #E81F4B;
    color: #ffffff;
  }
}
</style>
